<template>
  <el-card class="flow-condition" shadow="never">
    <div slot="header" class="flow-condition-title">
      <div>条件</div>
      <div>
        <el-link type="primary" :underline="false" @click="handleEdit"><i class="el-icon-edit"></i></el-link>
        <el-link type="danger" :underline="false" @click="handleDelete"><i class="el-icon-delete"></i></el-link>
      </div>
    </div>
    <div v-html="conditionLabel(conditions)"></div>
  </el-card>
</template>

<script>
export default {
  name: "ConditionCard",
  props: {
    conditions: {
      type: Array,
      default: () => []
    },
    compareOptions: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleEdit() {
      this.$emit("edit");
    },
    handleDelete() {
      this.$emit("delete");
    },
    conditionLabel(conditions) {
      if (!conditions || conditions.length === 0) {
        return '默认';
      }
      const conditionList = [];
      this.$lodash.forEach(conditions, condition => {
        const items = [];
        this.$lodash.forEach(condition.conditionNodes, node => {
          items.push(`${node.comment} ${this.compareLable(node.compare)} ${node.value}`);
        });
        conditionList.push(items.join(" 并且 "));
      });
      return conditionList.join(" 或者 ");
    },
    compareLable(val) {
      if (val === 'eq' || val === 'in' || val === 'not-in') {
        const compare = this.$lodash.find(this.compareOptions, o => o.dictValue === val);
        return compare ? compare.dictLabel : "";
      } else {
        return `&${val};`;
      }
    }
  }
}
</script>

<style scoped>

</style>
